<!DOCTYPE HTML>
<html>
<head>
<title>Estevez Seguros</title>
<script type="text/javascript" src="/seguros/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/seguros/js/jquery.tmpl.js"></script>
<script src="/seguros/js/ui/jquery.ui.core.js"></script>
<script src="/seguros/js/ui/jquery.ui.widget.js"></script>
<script src="/seguros/js/ui/jquery.ui.position.js"></script>
<script src="/seguros/js/ui/jquery.ui.autocomplete.js"></script>
<script src="/seguros/js/bootstrap/bootstrap.js"></script>
<link rel="stylesheet" href="/seguros/css/seguros.css" />
<link rel="stylesheet" href="/seguros/css/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="/seguros/css/bootstrap/css/bootstrap-responsive.css" />
<link rel="stylesheet" href="/seguros/css/bootstrap/css/bootstrap.css" />

<script type="text/javascript">
	$
			.ajax({
				type : 'GET',
				data : "format=json",
				dataType : 'json',
				url : 'http://localhost:8080/servicios/seguros/contacto',

				success : function(data) {
					$("#contactosListaTemplate").tmpl(data).appendTo(
							"#tablaContactos");
				}
			});
</script>

<script id="contactosListaTemplate" type="text/x-jquery-tmpl">
    <tr><td>${idContacto}</td><td>${nombre}</td></tr>
</script>

<style type='text/css'>
body {
	margin-top: 40px;
	text-align: center;
	font-size: 14px;
	font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}
</style>
<body>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span2">
                <!--Sidebar content-->
                <div class="well" style="padding: 8px 0;">
                    <ul class="nav nav-list">
                        <li class="active"><a href="/seguros/"><i class="icon-white icon-home"></i> Home</a></li>
                        <li><a href="/seguros/contactos.jsp"><i class="icon-book"></i> Contactos</a></li>
                        <li><a href="/seguros/calendario.jsp"><i class="icon-calendar"></i> Calendario</a></li>
                        <li class="nav-header">Configuraci&oacute;n</li>
                        <li><a href="#usuarios"><i class="icon-user"></i> Usuarios</a></li>
                        <li><a href="#settings"><i class="icon-cog"></i> Settings</a></li>
                        <li class="divider"></li>
                        <li><a href="#help"><i class="icon-flag"></i> Help</a></li>
                    </ul>
                </div>
            </div>
            <div class="span10">
                <ul class="nav nav-pills">
                    <li class="active"><a href="/seguros/contactos.jsp">Consultar</a></li>
                    <li><a href="/seguros/contactos_agregar.jsp">Agregar</a></li>
                    <li><a href="/seguros/contactos_editar.jsp">Editar</a></li>
                </ul>

                <div class="alert alert-info">
                    <button type="button" class="close" data-dismiss="alert">x</button>
                    <strong>Consejo!!</strong> Ingresar el nombre del contacto para reducir la cantidad de contactos.
                </div>
                
                <label for="tags">Busqueda: </label> <input id="tags">

                <div id="contactos" style="display: none">
                    <table class="stripeMe sample">
                        <thead>
                            <tr>
                                <th>Apellido</th>
                                <th>Nombre</th>
                                <th>Email</th>
                            </tr>
                        </thead>
                        <tbody id="contactosLista" />
                    </table>
                </div>

                <table id="tablaContactos" class="table table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Nombre</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
        </div>
    </div>

</body>
</html>
